<template>

  <div>
    <el-divider></el-divider>
    <!--操作按钮-->
    <div>
      <div style="display: flex;justify-content: space-between">
        <div>
          <el-input v-model="text" style="width: 300px;margin-right: 10px;"
                    size="small" placeholder="请输入课程名称" clearable @clear="initTable">
          </el-input>
          <el-button type="primary" @click="textPage(text)" icon="el-icon-search"
                     size="small" style="width: 90px;">搜索
          </el-button>
          <el-button v-if="user.teacher" style="margin-left: 10px;"
                     size="small" type="success" icon="el-icon-download"
                     @click="thenExportAll()">
            导出全部课程成绩
          </el-button>
        </div>

      </div>
    </div>
    <!--分页列表-->
    <div class="tableSet">
      <!--handleSelectionChange 复选框点击事件，就是每一条数据前面的勾选按钮-->
      <el-table
          border
          ref="multipleTable"
          :data="page.data"
          tooltip-effect="dark"
          style="width: 100%"
          size="small"
          v-loading="loading">
        <el-table-column
            prop="stId"
            label="数据编号"
            width="80">
        </el-table-column>
        <el-table-column
            prop="stItmId"
            label="课程编号"
            width="80"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="itmUUid"
            label="课程编码"
            width="300"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="stItmTitle"
            label="课程名称"
            width="100"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="stUsername"
            label="学生学号"
            width="100"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="stName"
            label="学生姓名"
            width="80"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="stTkCount"
            label="作业总数"
            width="100"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="stCompleteCount"
            label="完成总数"
            width="100"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="stAverage"
            label="作业平均分"
            width="100"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="stTotalScore"
            label="课程总分"
            width="100"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="stEndTime"
            label="课程结束时间"
            show-overflow-tooltip>
        </el-table-column>
      </el-table>
    </div>
    <!--分页控制组件-->
    <div class="block">
      <!--/**
      * 当前条数，@size-change 自动带过来的
      * @param val
      */-->
      <!-- /**
     * 当前页，@current-change 自动带过来的
     */-->
      <el-pagination
          background
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :page-size="size"
          layout="total, prev, pager, next, sizes, jumper"
          :total="page.total">
      </el-pagination>

    </div>

  </div>
</template>

<script>

export default {
  name: "Study",
  //导入组件
  components: {},
  data() {
    return {
      // 获取当前登录用户信息，在manin.js登录验证存进的session，接口获取的是一个json格式字符串，转换为js对象
      user: JSON.parse(window.sessionStorage.getItem('user')),
      // 加载动画
      loading: false,
      // 分页对象
      page: {
        total: 0,
        data: [{}]
      },
      // 第几页，默认第一页
      currentPage: 1,
      // 每页大小，默认10条数据一页
      size: 10,
      // 分页搜索文本
      text: '',
    }
  },
  // 一进入页面就要调用的接口放到 mounted 里面，比如页面表格分页
  mounted() {
    this.initTable();
  },
  methods: {
    /**
     * 文本搜索
     */
    textPage(text) {
      this.text = text;
      this.initTable();
    },
    /**
     * 分页数据
     */
    initTable() {
      this.loading = true
      this.getRequestParams("/course/studentTranscript",
          {
            currentPage: this.currentPage,
            size: this.size,
            text: this.text,
            userId: this.user.teacher ? null : this.user.id
          }).then(data => {
        if (data) {
          this.page = data
          this.loading = false;
        }
      })
    },
    thenExportAll() {
      this.postRequestParams("/file/export", {itmId: 0})
    }


  }

}
</script>

<style scoped>

.tableSet {
  margin-top: 10px;
}

.block {
  margin-top: 10px;
  text-align: center;
}


</style>